AULA05 - Estrtutura HTML e Formatação CSS: propriedades de Listas | Definições | Tabelas¶

AGENDA¶

  • Tags HTML de Listas
  • Propriedades CSS de Listas
  • Tags HTML de Tabelas
  • Propriedades CSS de Tabelas
  • Referências
  • Perguntas

1. Tags HTML de Listas¶

  • Para aprofundamento, consulte MDN Web Docs.
  • De acordo com [MDN Web Docs], "as listas estão em toda parte na vida — desde sua lista de compras à lista de instruções que você seguiu inconscientemente para chegar à sua casa todos os dias, para as listas das instruções que está seguindo nesses tutoriais! As listas também estão na Web e temos três tipos diferentes para prestarmos atenção".
    • Listas não ordenadas.
    • Listas ordenadas.
    • Lista de definições.

1.1. Listas não ordenadas¶

  • As listas não ordenadas são usadas para marcar listas de itens para os quais a ordem dos itens não importa.
    • Utilizamos as tags HTML <ul>...</ul> para abertura e fechamento da lista.
    • E para os itens da lista, utilizamos as tags HTML <li>...</li>.

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Aula03</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <h2>Lista não ordenada</h2>
      <ul>Comprar
        <li>Limão.</li>
        <li>Manga.</li>
        <li>Pêssego.</li>
        <li>Maçã.</li>
      </ul>
</body>
</html>

Figura 1: Exemplo de uso de lista não ordenada
Fonte: Autoria própria

1.2. Listas ordenadas¶

  • As listas ordenadas são usadas para marcar listas de itens para os quais a ordem dos itens importa.
    • Utilizamos as tags HTML <ol>...</ol> para abertura e fechamento da lista.
    • E para os itens da lista, utilizamos as tags HTML <li>...</li>.

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Aula03</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <h2>Lista ordenada</h2>
      <ol>Organizar nesta ordem
        <li>Planos de Ensino.</li>
        <li>Planos de Aula.</li>
        <li>Planos de Atividades.</li>
        <li>Diários.</li>
      </ol>
</body>
</html>

Figura 2: Exemplo de uso de lista ordenada
Fonte: Autoria própria

1.3. Listas de definição¶

  • Para aprofundamento, consulte MDN Web Docs.
  • Engloba uma lista de pares de termos e descrições. Um uso comum para este elemento é para implementar um glossário ou exibir metadados(uma lista de pares chave e valor).
    • Utilizamos as tags HTML <dl>...</dl> para abertura e fechamento da lista de definição.
    • Para os termos, títulos, cabeçalhos das listas, utilizamos as tags HTML <dt>...</dt>.
    • Representa os itens da lista, a definição dos termos listados imediantamente antes deste pelas outras tags, utilizamos as tags HTML <dd>...</dd>.

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Aula03</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <h2>Lista de Definição</h2>
      <dl>
        <dt>DWEI5</dt>
        <dt>Disciplina de Desenvolvimento Web</dt>
        <dt>5o. módulo</dt>
          <dd>A disciplina aborda os conceitos de linguagem de marcação de hipertexto, formatação de estilos e linguagem de script. </dd>
      </dl>
</body>
</html>

Figura 3: Exemplo de uso de lista de definição
Fonte: Autoria própria

2. Propriedades CSS de Listas¶

2.1. Propriedade list-style-type¶

  • Para aprofundamento, consulte MDN Web Docs.
  • O atributo type define o estilo de marcador para a lista.
  • Valores possíveis: circle, disc, square, decimal, decimal-leading- zero, upper-roman, lower-roman, upper-alpha, lower- alpha, lower-greek ou none.
  • Exemplo: 
ul {
    list-style-type: circle; 
}

2.2. Propriedade list-style-image¶

  • Para aprofundamento, consulte MDN Web Docs.
  • O atributo image: este atributo define uma imagem a ser usada como marcador de um item da lista.
  • Valores possíveis: url(caminho da imagem/nome.extensao);.
  • Exemplo: 
ul {
    list-style-image: url("../../img/elefante.jpg");
}

2.3. Propriedade list-style-position¶

  • Para aprofundamento, consulte MDN Web Docs.
  • O atributo position define a posição relativa do item na lista.
  • Valores possíveis: inside (alinhada à esquerda) ou outside (indentado).
  • Exemplo: 
ul {
    list-style-position: inside;
}

2.4. Propriedade list-style¶

  • Para aprofundamento, consulte MDN Web Docs.
  • Sintaxe: list-style: list-style-type list-style-image list-style-position;
ul {
    list-style: list-style-type list-style-image list-style-position;
}
  • Exemplo: 
ul {
    list-style: circle url("../../img/elefante.jpg") inside;
}

3. Tags HTML de Tabelas¶

3.1. Tags HTML para criação de uma tabela¶

  • As tags HTML utilizadas para criar uma tabela são:
    • <table>...</table>:
      • Indica o início de o fim de uma tabela.
      • Representa dados em duas dimensões ou mais.
    • <thead>...</thead>:
      • Representa o cabeçalho da tabela.
      • Neste item, inserimos as tags <th>...</th>, <tr>...</tr> combinadas.
    • <tbody>...</tbody>:
      • Representa o corpo da tabela.
      • Neste item, inserimos as tags pertinentes para criar o corpo da tabela <tr>...</tr>, <td>...</td>.
    • <tfoot>...</tfoot>:
      • Representa o rodapé da tabela.
      • Neste item, inserimos as tags <tr>...</tr>, <td>...</td> combinadas para indicar informações de rodapé.

3.2. Tags HTML para criação e manutenção de linhas das tabelas¶

  • As tags HMTL utilizadas para criar e manter as linhas das tabelas:
    • <tr>...</tr>:
      • Representa as linhas de uma tabela.
    • <th>...</th>>:
      • Representa os títulos das colunas.
    • <td>...</td>:
      • Representa os detalhes de cada linha, inseridos dentro de cada < tr >.
    • <caption>...</caption>:
      • O elemento HTML <caption> representa o título de uma tabela.
      • Embora ele seja sempre o primeiro filho de um <table>, seu estilo, usando CSS pode colocar ele em qualquer lugar relativo a tabela.
  • Os atributos colspan, e rowspan servem para unir (merge) mais de uma coluna ou linha.

  • Exemplos:

    • <td colspan="5">Fonte: (GIANCOLI, 2020) </td>: une 5 colunas de uma tabela em uma única célula.
    • <td rowspan="5">Ingredientes: </td>: une 5 linhas de uma tabela em uma única célula.
<td colspan="5">Fonte: (GIANCOLI, 2020) </td>  <!-- Unindo 5 colunas da tabela em uma única célula -->
<td rowspan="5">Ingredientes: </td>  <!-- Unindo 5 linhas da tabela em uma única célula -->
  • Para aprofundamento do assunto, consulte o Guia CSS-Tricks.

3.3. Exemplo de uma Estrutura de uma tabela¶

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Exemplo Tags Tabelas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <table>
      <caption>Tabela 1: Colunas e Linhas</caption>  <!--- Legenda da Tabela -->
      <thead>  <!--- Cabeçalhos da Tabela -->
        <tr>
          <th>Col-1</th>
          <th>Col-2</th>
          <th>Col-3</th>
          <th>Col-4</th>
          <th>Col-5</th>
        </tr>
      </thead>
      <tbody>  <!--- Corpo da Tabela -->
          <tr>
            <td>Célula 1-L1</td>
            <td>Célula 2-L1</td>
            <td>C3-L1</td>
            <td>C4-L1</td>
            <td>C5-L1</td>
          </tr>
          <tr>
            <td>C1-L2</td>
            <td>C2-L2</td>
            <td>C3-L2</td>
            <td>C4-L2</td>
            <td>C5-L2</td>
          </tr>
          <tr>
            <td>C1-L3</td>
            <td>C2-L3</td>
            <td>C3-L3</td>
            <td>C4-L3</td>
            <td>C5-L3</td>
          </tr>
          <tr>
            <td>C1-L4</td>
            <td>C2-L4</td>
            <td>C3-L4</td>
            <td>C4-L4</td>
            <td>C5-L4</td>
          </tr>
      </tbody>
      <tfoot>  <!--- Rodapé da Tabela -->
          <tr>
            <td colspan="5">Fonte: (GIANCOLI, 2020) </td>
          </tr>
      </tfoot>
    </table>
</body>
</html>

Figura 4: Exemplo de estrutura de uma tabela
Fonte: Autoria própria

Observação:¶

  • Para alinhar a legenda, utilize a propriedade CSS, text-align.
  • Para posicionar a legenda, utilize a propriedade CSS, caption-side, podendo ser top, ou bottom.
  • As propriedades de fontes e textos podem ser aplicadas às tabelas também.

4. Propriedades CSS de Tabelas¶

4.1. Propriedade table-layout¶

  • Valores possíveis para table-layout:
    • auto:
      • um algoritmo de layout de tabela automático é comumente usado pela maioria dos navegadores para layout de tabela.
      • As larguras da tabela e suas células dependem do seu conteúdo.
      • Este é o valor padrão.
    • fixed:
      • As larguras da tabela e da coluna são definidas pelas larguras dos elementos <table> e <col> ou pela largura da primeira linha de células.
      • Observação: Células em linhas subseqüentes não afetam larguras de coluna.
  • Utilizando a propriedade table-layout: fixed;
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */

.tabela {
  table-layout: fixed;
  width: 500px;
}

Figura 5: Exemplo de uma tabela com a propriedade table-layout: fixed
Fonte: Autoria própria
  • Utilizando a propriedade table-layout: auto;
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */

.tabela {
  table-layout: auto;
  width: 500px;
}

Figura 6: Exemplo de uma tabela com a propriedade table-layout: auto
Fonte: Autoria própria

4.2. Propriedade width¶

  • Responsável por controlar a largura das colunas.
  • Os valores seguem os padrões definidos em pixels, % etc.
  • Utilizando a propriedade width: 500px;
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */

.tabela {
  table-layout: auto;
  width: 500px;
}

Figura 7: Exemplo de uma tabela com a propriedade width: 500px
Fonte: Autoria própria

4.3. Propriedade text-align¶

  • Responsável pelo alinhamento do conteúdo horizontalmente nas células.
  • O valor padrão é à esquerda (left).
  • Utilizando a propriedade text-align: right;.
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  text-align: right;
}

Figura 8: Exemplo de uma tabela com a propriedade text-align: right
Fonte: Autoria própria
  • Utilizando a propriedade text-align: center;.
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  text-align: center;
}

Figura 9: Exemplo de uma tabela com a propriedade text-align: center
Fonte: Autoria própria

4.4. Propriedade vertical-align¶

  • É a propriedade CSS de alinhamento vertical, especificando o alinhamento vertical de uma linha.
  • Valores possíveis para vertical-align:
    • baseline:
      • Alinha a linha de base do elemento com a linha de base de seu pai.
    • sub:
      • Alinha a linha de base do elemento com a linha de base do subscrito de seu pai.
    • super:
      • Alinha a linha de base do elemento com a linha de base do superíndice de seu pai.
    • top:
      • Alinha a parte superior do elemento com a parte superior da fonte do elemento pai.
    • bottom:
      • Alinha a parte inferior do elemento com a parte inferior da fonte do elemento pai.
    • middle:
      • Alinha o meio do elemento com a linha de base mais metade da altura x do pai.

Observação:¶

  • Para visualizarmos o funcionamento, adicionamos a altura da tabela height: 250px; e em seguida, variamos a propriedade vertical-align com alguns dos valores possíveis.
  • Utilizando a propriedade vertical-align: bottom;.
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  height: 250px;  /* inserido */
  text-align: center;
}
td {
    vertical-align: bottom; /* define um valor padrão para todas as linhas */
}

Figura 10: Exemplo de uma tabela com a propriedade vertical-align: bottom
Fonte: Autoria própria
  • Utilizando a propriedade vertical-align: top;.
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  height: 250px;  /* inserido */
  text-align: center;
}
td {
    vertical-align: top; /* define um valor padrão para todas as linhas */
}

Figura 11: Exemplo de uma tabela com a propriedade vertical-align: top
Fonte: Autoria própria

4.5. Propriedade pseudoclasse :nth-child¶

  • É responsável pela configuração do alinhamento das células de cada coluna.
  • Utilizando a propriedade :nth-child(valor).
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  text-align: center;
}
  /* inserido */
:nth-child(1) {
  text-align: justify;
}
:nth-child(2) {
  text-align: right;
}
:nth-child(3) {
  text-align: left;
}
:nth-child(4) {
  text-align: center;
}
:nth-child(5) {
  text-align: left;
}

Figura 12: Exemplo de uma tabela com a propriedade :nth-child(valor)
Fonte: Autoria própria

4.6. Propriedade caption-side¶

  • A propriedade CSS responsável pelo posicionamento da legenda indicada no conteúdo do <caption> de uma tabela no lado especificado.
  • Valores possíveis para caption-side:
    • Valores direcionais, tais como:
      • caption-side: top; é o valor padrão.
      • caption-side: bottom;.
  • Utilizando a propriedade caption-side: top;.
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  text-align: center;
  caption-side: top;    /* inserido */
}

Figura 13: Exemplo de uma tabela com a propriedade caption-side: top
Fonte: Autoria própria
  • Utilizando a propriedade caption-side: bottom;.
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  text-align: center;
  caption-side: bottom;    /* inserido */
}

Figura 14: Exemplo de uma tabela com a propriedade caption-side: bottom
Fonte: Autoria própria

4.7. Propriedade border-style e border-color¶

  • border-style: é a propriedade CSS responsável pelo estilo aplicado às linhas de contorno da tabela e células.
  • Valores possíveis para border-style:
    • border-style: none; :
      • não exibe a borda.
    • border-style: dotted; :
      • exibe a borda com pontilhado.
    • border-style: inset; :
      • exibe a borda com sombra interna.
    • border-style: dashed solid; :
      • exibe a borda pontilhada no topo e baixo, e nas laterais: sólida.
    • border-style: dashed double none; :
      • exibe a borda pontilhada no topo e baixo, e nas laterais: duplicada.
    • border-style: dashed groove none dotted; :
      • combinação de várias.

Observações:¶

  • Para exibir os estilos das bordas, utilizamos a propriedade border-style, e para escolher a cor da borda, utilizamos a propriedade border-color.
  • Adicionamos a propriedade vertical-align: middle; , para exibir o texto no centro das células.
  • No Exemplo, utilizamos:
    • A propriedade border-style nas formatações da tabela, exibe externamente a borda da tabela na cor vermelha.
    • A propriedade border-style nas formatações dos títulos da tabela (th), exibe as bordas das células que tiverem a tag <th> na cor verde (#3e8f3e).
    • A propriedade border-style nas formatações dos detalhes da tabela (td), exibe as bordas das células que tiverem a tag <td> na cor azul (dodgerblue).
  • Utilizando a propriedade border-style: dashed;. 
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  height: 250px;
  text-align: center;
  border-style: dashed;  /* inserido */
  border-color: red;
}
th {
  border-style: dashed;  /* inserido */
  border-color: #3e8f3e;
}
td {
  vertical-align: middle;
  border-style: dashed;  /* inserido */
  border-color: dodgerblue;
}

Figura 15: Exemplo de uma tabela com a propriedade border-style: dashed
Fonte: Autoria própria
  • Utilizando a propriedade border-style: solid groove dashed dotted;.
  • Ao definirmos 4 valores seguidos, a formatação das bordas se dá da seguinte forma: topo, direita, abaixo, esquerda.
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  height: 250px;
  text-align: center;
  border-style: solid groove dashed dotted;    /* inserido */
  border-color: dodgerblue;
}
td {
  vertical-align: middle;
  border-style: solid;    /* inserido */
  border-color: gray;
}

Figura 16: Exemplo de uma tabela com a propriedade border-style: solid groove dashed dotted
Fonte: Autoria própria

4.8. Propriedade border-collapse¶

  • A propriedade CSS border-collapse determina se as bordas de uma tabela são separadas ou recolhidas.
  • Modelo de borda separate:
    • No modelo de borda separate, as células adjacentes possuem suas próprias bordas distintas.
    • O modelo de borda separate é o tradicional modelo de borda de tabela HTML.
    • A distância entre eles dada pela propriedade border-spacing.
  • Modelo de borda collapse:
    • No modelo de borda collapse, as células de tabela adjacentes partilham fronteiras.
  • Valores permitidos:
    • separate:
      • É uma palavra-chave solicitando o uso do modelo de renderização de tabela de borda separada.
      • É o valor padrão.
    • collapse:
      • É uma palavra-chave que solicita a utilização do modelo de renderização de tabela de borda recolhida.
  • Utilizando a propriedade border-collapse: collapse;. 
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  height: 250px;
  text-align: center;
  border-style: solid groove dashed dotted;
  border-color: dodgerblue;
  border-collapse: collapse;
}
td {
  vertical-align: middle;
  border-style: solid;
  border-color: gray;
}

Figura 17: Exemplo de uma tabela com a propriedade border-collapse: collapse
Fonte: Autoria própria

4.9. Propriedade border-spacing¶

  • A propriedade CSS border-spacing de espaçamento de bordas especifica a distância entre as bordas de células de tabela adjacentes (apenas para o modelo de bordas separadas).
  • O valor de espaçamento entre bordas também é usado ao longo da borda externa da tabela, onde a distância entre a borda da tabela e as células na primeira / última coluna ou linha é a soma do espaçamento entre bordas relevante (horizontal ou vertical) e relevante (superior, direita, inferior ou esquerda) na tabela.
  • Esta propriedade aplica-se somente quando border-collapse é separate.
  • Valores possíveis para border-spacing:
    • border-spacing: length;
    • border-spacing: horizontal vertical;
    • border-spacing: inherit;
  • Utilizando a propriedade border-spacing: 10px;. 
<!-- Arquivo index.html --> 
<!-- Omitido para facilitar o entendimento --> 
<!-- Utilizar a mesma estrutura criada no item 3.3. Exemplo de uma Estrutura de uma tabela -->

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  height: 250px;
  text-align: center;
  border-style: solid;
  border-color: dodgerblue;
  border-collapse: separate;  /* modificado para separte */
  border-spacing: 10px;   /* inserido */
}
td {
  vertical-align: middle;
  border-style: solid;
  border-color: gray;
}

Figura 18: Exemplo de uma tabela com a propriedade border-spacing: 10px
Fonte: Autoria própria

4.10. Propriedade empty-cells¶

  • A propriedade CSS empty-cells especifica como os agentes de usuário devem renderizar bordas e fundos em torno de células sem conteúdo visível.
  • Valores possíveis para empty-cells:
    • show:
      • É uma palavra-chave que indica que as bordas e fundos devem ser desenhados como em células normais.
    • hide:
      • É uma palavra-chave que indica que não há bordas ou fundos a serem desenhados.
  • Utilizando a propriedade empty-cells: hide;. 
<!-- Arquivo index.html -->   
<html>
<!-- Omitido para facilitar o entendimento --> 
<body>
    <table class="tabela">
      <caption>Tabela 1: Colunas e Linhas</caption>
      <thead>
        <tr>
          <th>Col-1</th>
          <th></th>   <!-- Conteúdo excluído para exemplificar --> 
          <th>Col-3</th>
          <th>Col-4</th>
          <th>Col-5</th>
        </tr>
      </thead>
      <tbody>
          <tr>
            <td>Célula 1-L1</td>
            <td>Célula 2-L1</td>
            <td>C3-L1</td>
            <td></td>   <!-- Conteúdo excluído para exemplificar --> 
            <td>C5-L1</td>
          </tr>
          <tr>
            <td>C1-L2</td>
            <td>C2-L2</td>
            <td>C3-L2</td>
            <td>C4-L2</td>
            <td>C5-L2</td>
          </tr>
          <tr>
            <td>C1-L3</td>
            <td></td>   <!-- Conteúdo excluído para exemplificar --> 
            <td>C3-L3</td>
            <td>C4-L3</td>
            <td>C5-L3</td>
          </tr>
          <tr>
            <td>C1-L4</td>
            <td>C2-L4</td>
            <td>C3-L4</td>
            <td>C4-L4</td>
            <td>C5-L4</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
            <td colspan="5">Fonte: (GIANCOLI, 2020) </td>
          </tr>
      </tfoot>
    </table>
</body>
</html>

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  height: 250px;
  text-align: center;
  border-style: solid;
  border-color: dodgerblue;
  border-collapse: separate;
  border-spacing: 10px;
}
td {
  vertical-align: middle;
  border-style: solid;
  border-color: gray;
  empty-cells: hide; /* inserido */
}

Figura 19: Exemplo de uma tabela com a propriedade empty-cells: hide
Fonte: Autoria própria

4.11. Propriedades rowspan e colspan¶

  • Utilizando <td rowspan="3">C1-L2</td> e <td colspan="5">Fonte: (GIANCOLI, 2020)</td>. 
<!-- Arquivo index.html -->   
<html>
<!-- Omitido para facilitar o entendimento --> 
<body>
    <table class="tabela">
      <caption>Tabela 1: Colunas e Linhas</caption>
      <thead>
        <tr>
          <th>Col-1</th>
          <th>Col-2</th>
          <th>Col-3</th>
          <th>Col-4</th>
          <th>Col-5</th>
        </tr>
      </thead>
      <tbody>
          <tr>
            <td>Célula 1-L1</td>
            <td>Célula 2-L1</td>
            <td>C3-L1</td>
            <td>C4-L1</td>
            <td>C5-L1</td>
          </tr>
          <tr>
            <td rowspan="3">C1-L2</td> <!--  inserido -->
            <td>C2-L2</td>
            <td>C3-L2</td>
            <td>C4-L2</td>
            <td>C5-L2</td>
          </tr>
          <tr>
                                <!-- Excluído pois a Célula C1-L2 ocupou seu espaço -->
            <td>C2-L3</td>
            <td>C3-L3</td>
            <td>C4-L3</td>
            <td>C5-L3</td>
          </tr>
          <tr>
                               <!-- Excluído pois a Célula C1-L2 ocupou seu espaço  -->
            <td>C2-L4</td>
            <td>C3-L4</td>
            <td>C4-L4</td>
            <td>C5-L4</td>
          </tr>
      </tbody>
      <tfoot>
          <tr>
            <td colspan="5">Fonte: (GIANCOLI, 2020) </td>   <!--  inserido -->
          </tr>
      </tfoot>
    </table>
</body>
</html>

/* Arquivo estilo.css */
.tabela {
  table-layout: auto;
  width: 500px;
  height: 250px;
  text-align: center;
  border-style: solid;
  border-color: dodgerblue;
  border-collapse: separate;
  border-spacing: 10px;
}
td {
  vertical-align: middle;
  border-style: solid;
  border-color: gray;
}

Figura 20: Exemplo de uma tabela com a propriedade rowspan="3" e colspan="5"
Fonte: Autoria própria

Referências¶

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>